import React from 'react'
import { getListData } from '../../../fetch/home/home'
import ListComponent from '../../../components/List'
import LoadMore from "../../../components/LoadMore";

class List extends React.Component {
  constructor(props, context){
    super(props, context);
    this.state = {
      data: [], // 存储数据，上面的代码中已经使用了
      hasMore: false, // 记录当前状态下，是否还有更多数据，这个需要后端返回。true即还有，false即没了
      isLoadingMore: false, // 记录当前状态下，是否正在加载中。true即正在加载中，false即不是加载中状态
      page: 1 // 记录下一页的页码，首页的页码是0
    };
  }
  render(){
    return (
      <div>
        <h2 className="home-list-title">猜你喜欢</h2>
        {
          this.state.data.length
          ? <ListComponent data={this.state.data}/>
            : <div>正在加载中...</div>
        }
        {
          this.state.hasMore
          ? <LoadMore isLoadingMore={this.state.isLoadingMore} loadMoreFn={this.loadMoreData.bind(this)}/>
            : ''
        }
      </div>
    );
  }
  componentDidMount(){
    // 获取首页数据
    this.loadFirstPageData();
  }

  // 获取首屏数据
  loadFirstPageData(){
    const cityName = this.props.cityName;
    const result = getListData(cityName, 0);
    // console.log(result);
    this.resultHandle(result);
  }
  // 加载更多数据
  loadMoreData(){
    // 记录状态
    this.setState({
      isLoadingMore: true
    });
    const cityName = this.props.cityName;
    const page = this.state.page; // 下一页的页码
    const result = getListData(cityName, page);

    // 用到this.resultHandle
    this.resultHandle(result);

    // 增加page的计数
    this.setState({
      page: page + 1,
      isLoadingMore: false
    })
  }
  // 数据处理
  resultHandle(result){
    result.then( res => {
      return res.json()
    }).then( json => {
      // console.log(json);
      const hasMore = json.hasMore;
      const data = json.data;

      // 存储
      this.setState({
        hasMore: hasMore,
        data: this.state.data.concat(data)
      });
    });
  }
}

export default List;